.orderDetails {
    padding-bottom: 200rpx;

    .lineOne {
        width: 750rpx;
        height: 4rpx;
        background: #130101;
        opacity: 0.05;
    }

    .siteDetails-one {
        padding: 52rpx 32rpx;

        .address {
            font-size: 45rpx;
            font-weight: bolder;
            color: #130101;
        }

        .doorModel {
            width: 686rpx;
            height: 168rpx;
            background: rgba(216, 216, 216, .2);
            border-radius: 16px;
            display: flex;
            margin-top: 22rpx;
            .doorModelItem {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .model {
                    font-size: 20rpx;
                    color: rgb(146, 158, 178);
                }

                .answer {
                    margin-top: 10rpx;
                    font-size: 28rpx;
                    color: #000000;
                    font-weight: bolder;
                    position: relative;

                    text {
                        position: absolute;
                        right: -4;
                        top: 0;
                        font-size: 14rpx;
                    }
                }
            }
        }
    }

    .lineTwo {
        width: 750rpx;
        height: 2rpx;
        background: #130101;
        opacity: 0.05
    }

    .siteDetails-two {
        margin-top: 52rpx;
        padding: 0 32rpx;

        .title {
            font-size: 36rpx;
            font-weight: bolder;
            color: #000000;
        }

        .describe {
            margin-top: 32rpx;
            color: #000000;
            font-weight: bolder;
            font-size: 28rpx;

            text {
                color: #D6000F;
            }
        }

        .doorModel {
            margin-top: 32rpx;
            width: 686rpx;
            height: 321rpx;
            background: #F7F7F7;
            border-radius: 16rpx;
            padding: 71rpx 46rpx 0;
            box-sizing: border-box;

            .instructions {
                display: flex;

                // margin-top: 71rpx;
                .instructionsItem {
                    flex: 1;
                    text-align: center;
                }
            }

            .progress {
                display: flex;
                align-items: center;
                margin-top: 36rpx;
                margin-left: 60rpx;

                .round {
                    width: 16rpx;
                    height: 16rpx;
                    border: 2rpx solid #D6000F;
                    border-radius: 50%;

                }

                .complete {
                    background: #D6000F;
                }

                .line {
                    background: rgb(223, 187, 214);
                    width: 136rpx;
                    height: 5rpx;

                }

            }

            .calendar {
                display: flex;
                margin-top: 17rpx;

                .calendarItem {
                    flex: 1;
                    font-size: 24rpx;
                    color: #020113;
                    text-align: center;
                    color: #929eb2;
                }
            }

            .showCalendar {
                width: 317rpx;
                height: 44rpx;
                background: #FFFFFF;
                border-radius: 15rpx;
                display: flex;
                margin: 28rpx auto 0;
                justify-content: center;
                align-items: center;

                .text {
                    font-size: 21rpx;
                    color: #8B8C8E;
                    line-height: 44rpx
                }

                image {
                    width: 22rpx;
                    height: 22rpx;
                }
            }
        }
    }

    .siteDetails-treen {
        margin-top: 66rpx;
        padding: 0 32rpx;

        .title {
            font-size: 36rpx;
            font-weight: bolder;
            color: #000000;
        }

        .contentList {
            margin-top: 45rpx;

            .contentItem {}

            // .progress {
            //     width: 34rpx;
            //     display: flex;
            //     flex-direction: column;
            //     align-items: center;
            //     justify-content: center;




            // }
            .round {
                width: 34rpx;
                height: 34rpx;
                background: #FFFFFF;
                border: 1rpx solid #000000;
                border-radius: 50%;

            }

            .complete {
                margin-left: 6rpx;
                margin-top: 6rpx;
                background: #000000;
                width: 23rpx;
                height: 23rpx;
                border-radius: 50%;

            }

            .line {
                background: #000000;
                width: 5rpx;
                height: 136rpx;

            }

            .progress-name {
                font-size: 28rpx;
                font-weight: bolder;
                color: #000000;
                display: flex;

                .progress-name-right {
                    margin-left: 18rpx;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;

                    .progress-name-right-time {
                        font-size: 24rpx;
                        color: #797A7C;
                    }
                }


            }

            .content {
                border-left: 2rpx solid black;
                margin-left: 18rpx;
                padding-left: 16rpx;
                padding-top: 26rpx;
                padding-bottom: 50rpx;
            }

            .commentsList {
                // margin-top: 26rpx;
            }

            .comments {
                display: flex;
                margin-bottom: 6rpx;
                margin-left: 16rpx;
            }

            .commentary-positions {

                width: 115rpx;

                view {
                    background: #D6000F;
                    border-radius: 4rpx;
                    font-size: 20rpx;
                    font-weight: bolder;
                    color: #FFFFFF;
                    line-height: 32rpx;
                }
            }

            .commentary-content {
                // width: 419rpx;
                // height: 36rpx;
                flex: 1;
                margin-left: 8rpx;
                font-size: 24rpx;
                color: #000000;
            }

            .comments-picture {
                width: 654rpx;
                // height: 168rpx;
                padding-left: 15rpx;
                box-sizing: border-box;
                border-radius: 6rpx;
                border: 1rpx solid #979797;
                display: flex;
                flex-wrap: wrap;
                margin-top: 16rpx;
                // justify-content:space-between ;
                align-items: center;
                // overflow: scroll;
                padding-top: 17rpx;

                image {
                    flex-shrink: 0;
                    width: 144rpx;
                    height: 144rpx;
                    background: #D8D8D8;
                    border-radius: 11rpx;
                    margin-right: 15rpx;
                    margin-bottom: 17rpx;
                }
            }
        }

        .lookContenr {
            width: 317rpx;
            height: 44rpx;
            background: #EEEFF2;
            border-radius: 15rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-size: 21rpx;
            color: #8B8C8E;
            line-height: 44rpx;
            margin-top: 53rpx;

            image {
                width: 22rpx;
                height: 22rpx;
                display: block;
                margin-left: 5rpx;

            }
        }
    }

    .siteDetails-four {
        margin-top: 66rpx;
        padding: 0 32rpx;
        padding-bottom: 110rpx;

        .title {
            font-size: 36rpx;
            font-weight: bolder;
            color: #000000;
        }

        .teamList {
            display: flex;

            .temaItem {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 44rpx;

                image {
                    width: 120rpx;
                    height: 120rpx;
                    border: 1rpx solid #979797;
                    border-radius: 50%;
                }

                text {
                    margin-top: 32rpx;
                    font-size: 28rpx;
                    color: #000000;
                }
            }
        }
    }

    .siteDetails-five {
        margin-top: 66rpx;
    
        padding-bottom: 0rpx;

        .title {
            padding: 0 32rpx;
            font-size: 36rpx;
            font-weight: bolder;
            color: #000000;
            margin-bottom: 32rpx;
        }


    }
}

.messageContentList {
    margin-top: 22rpx;
    overflow: hidden;

    .messageContentItem-one {
        padding: 0 32rpx;
        .smalltitle {

            font-weight: bolder;
            font-size: 28rpx;
            margin-top: 32rpx;
        }

        .smalltitle-conten {
            display: flex;
            justify-content: space-between;

            font-size: 28rpx;

            & view:first-child {
                color: #8B8C8E;
            }

            &:nth-of-type(2) {
                margin-top: 32rpx;
            }

            &:nth-of-type(3) {
                margin-top: 65rpx;
                margin-bottom: 48rpx;
            }
        }


    }
    .messageContentItem-two {
        padding: 0 32rpx;
        .smalltitle {

            font-weight: bolder;
            font-size: 28rpx;
            margin-top: 32rpx;
        }

        .smalltitle-conten {
            display: flex;
            justify-content: space-between;

            font-size: 28rpx;

            & view:first-child {
                color: #8B8C8E;
            }
            margin-top: 32rpx;
          

        
        }
        .smalltitle-conten-two {
    
            margin-top: 32rpx;
            font-size: 28rpx;

            & view:first-child {
                color: #8B8C8E;
            }
          .fexlImage{
              display: flex;
              margin-top: 24rpx;
              flex-wrap: wrap;
             margin-bottom: 32rpx;
              image{
                width: 160rpx;
                margin-right: 15rpx;
                flex-shrink: 0;
                margin-bottom: 10rpx;
                height: 160rpx;
                background: #D8D8D8;
                border-radius: 8rpx;
                &:nth-of-type(4n-4){
                    margin-right: 0rpx;
                }
              }
          }
          

        
        }
        


    }
    .messageContentItem-treen {
        padding: 0 32rpx;
        .smalltitle {

            font-weight: bolder;
            font-size: 28rpx;
            margin-top: 32rpx;
        }

        .smalltitle-conten {
            display: flex;
            justify-content: space-between;

            font-size: 28rpx;
            margin-bottom: 32rpx;
            & view:first-child {
                color: #8B8C8E;
            }
            margin-top: 32rpx;
          

        
        }
        .smalltitle-conten-two {
    
            margin-top: 32rpx;
            font-size: 28rpx;

            & view:first-child {
                color: #8B8C8E;
            }
          .fexlImage{
              display: flex;
              margin-top: 24rpx;
              flex-wrap: wrap;
             margin-bottom: 32rpx;
              image{
                width: 160rpx;
                margin-right: 15rpx;
                flex-shrink: 0;
                margin-bottom: 10rpx;
                height: 160rpx;
                background: #D8D8D8;
                border-radius: 8rpx;
                &:nth-of-type(4n-4){
                    margin-right: 0rpx;
                }
              }
          }
          

        
        }
      .redColor{
          color: #D6000F !important;
      }


    }
}

.hideDetails {
    max-height: 327rpx;
    transition: all 0.3s;
}

.showDetails {
    max-height: 9000rpx;
    transition: all 0.3s;
}

.lookAll {
    width: 317rpx;
    height: 44rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    background: rgb(238, 239, 242, .8);
    border-radius: 15rpx;
    font-size: 21rpx;

    line-height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8B8C8E;

    image {
        width: 21px;
        height: 21px;

    }
}


.messageContentItemMap {
    padding: 32rpx 0;
    border-bottom: 2rpx solid rgba(19, 1, 1, 0.1);

    .messageContentItemMap-name {
        font-size: 28rpx;
        color: #797A7C;
    }

    .showMapList {
        margin-top: 24rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        image {
            margin-bottom: 18rpx;
            flex-shrink: 0;
            width: 146rpx;
            height: 146rpx;
            background: #D8D8D8;
            // margin-right: 18rpx;
            border-radius: 8rpx
        }
    }
}

.calendarest {
    width: 686rpx;
    padding-bottom: 28rpx;
    // height: 779rpx;
    background: #F7F7F7;
    border-radius: 16rpx;
    margin-top: 32rpx;

    .calendar {
        // height: 672rpx;
    }

    .showCalendar {
        width: 317rpx;
        height: 44rpx;
        background: #FFFFFF;
        border-radius: 15rpx;
        display: flex;
        margin: 28rpx auto 0;
        justify-content: center;
        align-items: center;

        .text {
            font-size: 21rpx;
            color: #8B8C8E;
            line-height: 44rpx
        }

        image {
            width: 22rpx;
            height: 22rpx;
        }
    }
}

.tab {
    display: flex;
    height: 70rpx;
    position: sticky;
    left: 0 ;
//   top: 124rpx;
  background: white;
    view {
        flex: 1;
        text-align: center;
        line-height: 70rpx;
    }

    
.activeLeng{
    width: 48rpx;
height: 4rpx;
background: #D6000F;
border-radius: 3rpx;
position: absolute;
transition: all 0.3s;
bottom: 0;
left: 0;
}
}
.fixed{

  
}

.btn{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 750rpx;
height: 196rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 48rpx 0rpx rgba(1,7,19,0.15);
border-radius: 32rpx 32rpx 0rpx 0rpx;
view{
    margin: 24rpx auto 0;
    width: 686rpx;

height: 88rpx;
background: #D6000F;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 88rpx;
text-align: center;
}
}




.MoneyMask {
    background: rgba(0, 0, 0, .8);
    position: fixed;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 100vh;
    z-index: 700;

    display: flex;
    justify-content: center;
    align-items: center;

    .orderContent {
        margin-top: 97rpx;

        height: 937rpx;
        overflow: auto;
        background-color: white;
        padding-top: 59rpx;
        width: 686rpx;
        border-radius: 32rpx;


        .title {
            //   border-bottom: 1rpx solid rgba(2, 1, 19, .1);
            padding-bottom: 56rpx;
            font-size: 48rpx;
            text-align: center;
            color: #000000;
            font-weight: bolder;
        }


    }

    .contentList {
        .contentItem {
            width: 545rpx;
            margin: 0 auto 65rpx;
        }

        .smalltilte {

            font-size: 28rpx;
        }

        .input {
            width: 545rpx;
            height: 78rpx;
            border-radius: 5rpx;
            border: 1rpx solid #979797;
            font-size: 28rpx;
            margin-top: 24rpx;
            padding: 0 16rpx;
            line-height: 78rpx;
            // position: ;

            // border-radius: 5rpx;
        }
    }

    .next {
        width: 602rpx;
        height: 85rpx;
        font-size: 36rpx;
        font-weight: bolder;
        color: #FFFFFF;
        text-align: center;
        margin: 0 auto;
        background: #D60010;
        border-radius: 43rpx;
        line-height: 85rpx;
    }
}

.periodMask {
    background: rgba(0, 0, 0, .8);
    position: fixed;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 100vh;
    z-index: 700;

    display: flex;
    justify-content: center;
    align-items: center;

    .orderContent {
        margin-top: 97rpx;

        width: 686rpx;
        height: 828rpx;
        overflow: auto;
        background-color: white;
        padding-top: 59rpx;
        border-radius: 32rpx;


        .title {
            //   border-bottom: 1rpx solid rgba(2, 1, 19, .1);
            padding-bottom: 56rpx;
            font-size: 48rpx;
            text-align: center;
            color: #000000;
            font-weight: bolder;
        }


    }

    .contentList {
        .contentItem {
            width: 545rpx;
            margin: 0 auto 65rpx;
        }

        .smalltilte {

            font-size: 28rpx;
        }

        .input {
            width: 545rpx;
            height: 78rpx;
            border-radius: 5rpx;
            border: 1rpx solid #979797;
            font-size: 28rpx;
            margin-top: 24rpx;
            padding: 0 16rpx;
            line-height: 78rpx;

            .picker {
                text-align: center;
                color: #CACACA;

                font-size: 28rpx;
            }

            // position: ;

            // border-radius: 5rpx;
        }
    }

    .next {
        width: 602rpx;
        height: 85rpx;
        font-size: 36rpx;
        font-weight: bolder;
        color: #FFFFFF;
        text-align: center;
        margin: 0 auto;
        background: #D60010;
        border-radius: 43rpx;
        line-height: 85rpx;
    }
}

.fromMask {
    background: rgba(0, 0, 0, .8);
    position: fixed;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 100vh;
    z-index: 700;

    display: flex;
    justify-content: center;
    align-items: center;

    .orderContent {
        margin-top: 97rpx;
        height: 1082rpx;
        //   
        background-color: white;
        padding-top: 59rpx;
        width: 686rpx;
        border-radius: 32rpx;
        position: relative;
        // 
 
        .scloorbox {
            overflow: auto;
            height: 982rpx;
            padding-bottom: 100rpx;
            box-sizing: border-box;
            // padding-bottom: ;
        }

        .title {
            border-bottom: 1rpx solid rgba(2, 1, 19, .1);
            padding-bottom: 56rpx;
            font-size: 48rpx;
            text-align: center;
            color: #000000;
            font-weight: bolder;
        }

        .details {
            padding: 0 24rpx;
            margin-top: 56rpx;
        }

        .address {

            font-size: 36rpx;
            font-weight: bolder;
            color: #000000;
        }

        .messageList {
            width: 638rpx;
            height: 156rpx;
            background: rgba(216, 216, 216, .2);
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            margin-top: 16rpx;

            .messageItem {
                flex: 1;
                text-align: center;

                & view:nth-of-type(1) {
                    color: #797A7C;
                    font-size: 20rpx;
                    font-weight: bolder;
                }

                & view:nth-of-type(2) {
                    margin-top: 10rpx;
                    font-size: 28rpx;
                    font-weight: bolder;
                }
            }
        }

        .messageContentList {
            margin-top: 22rpx;

            .messageContentItem {
                padding: 32rpx 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2rpx solid rgba(19, 1, 1, .1);

                &:last-of-type {
                    border-bottom: 0rpx solid transparent;
                }

                .messageContent-left {
                    font-size: 28rpx;
                    color: #797A7C;
                }

                .messageContent-right {
                    position: relative;

                    font-size: 28rpx;

                    image {
                        width: 156rpx;
                        height: 156rpx;
                        border-radius: 50%;
                    }

                    .name {
                        width: 156rpx;
                        height: 40rpx;
                        background: rgba(2, 1, 19, .8);
                        border-radius: 8rpx;
                        text-align: center;
                        color: white;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        line-height: 40rpx;
                    }

                    .redSize {
                        color: #D6000F;
                    }
                }
            }
        }

        .messageContentItemMap {
            padding: 32rpx 0;
            border-bottom: 2rpx solid rgba(19, 1, 1, 0.1);

            .messageContentItemMap-name {
                font-size: 28rpx;
                color: #797A7C;
            }

            .showMapList {
                margin-top: 24rpx;
                display: flex;
                // justify-content: ;
                flex-wrap: wrap;

                image {
                    margin-bottom: 18rpx;
                    flex-shrink: 0;
                    width: 146rpx;
                    height: 146rpx;
                    background: #D8D8D8;
                    margin-right: 18rpx;
                    border-radius: 8rpx;

                    &:nth-of-type(4n-4) {
                        margin-right: 0rpx;
                    }
                }
            }
        }

        .btns {
            position: absolute;
            bottom: 0rpx;
            left: 0;
            width: 686rpx;
            height: 100rpx;
            margin: 43rpx auto;
            display: flex;
            justify-content: center;
            background: white;
            //   background: gold;
            view{
                width: 303rpx;
                height: 88rpx;
                text-align: center;
                line-height: 88rpx;
                font-weight: bold;
                font-size: 32rpx;
                border-radius: 44rpx;
            }
        }
        .preservation{
            // background: #D6000F;
            // border-radius: 44px;
            border: 2px solid #D6000F;
            
color: #D6000F;
        }
        .submit {
         
         margin-left: 16rpx;
          
            background: #D6000F;
         

            color: #FFFFFF;
           
        }
    }
}
.successMask {
    background: rgba(0, 0, 0,.8);
      position: fixed;
      left: 0;
      top: 0;
      width: 750rpx;
      height: 100vh;
      z-index: 700;
      display: flex;
      justify-content: center;
      align-items: center;
  
      .successContent {
          width: 654rpx;
          height: 764rpx;
          background: #FFFFFF;
          border-radius: 32rpx;
          padding: 112rpx 0 73rpx 0;
          box-sizing: border-box;
  
          image {
              width: 364rpx;
              height: 303rpx;
              display: block;
              margin: 0 auto;
          }
  
          .text {
              margin-top: 60rpx;
              font-weight: bolder;
              font-size: 48rpx;
              text-align: center;
              margin-bottom: 78rpx;
          }
  
          .btnst {
            text-align: center;
              width: 590rpx;
              height: 80rpx;
              background: #D6000F;
              border-radius: 44rpx;
              font-size: 32rpx;
              font-weight: bolder;
              color: #FFFFFF;
              line-height: 80rpx;
              text-align: center;
              margin: 0 auto;
          }
      }
  }
.explain{
  margin-top: 23rpx;
  text-indent: 32rpx;
  margin-bottom: 32rpx;
}